<template>
	<view class="container">
		<view class="top">
			<image src="/static/mine/1.png" mode="" class="logo"></image>
			<view class="tip">
				您身边最靠谱的客情服务管家
			</view>
		</view>
		<view class="user_info">
			<view class="user_info_top" @click="gotoEditUser">
				<view class="user_img">
					<image src="https://www.zmtc.com/wp-content/uploads/2024/01/7-5.jpg" mode=""
						class="profile_picture_img"></image>
				</view>
				<view class="user_detail">
					<view class="user_name">
						淘淘
					</view>
					<view class="user_phone">
						<image src="/static/mine/2.png" mode="" class="sex_icon"></image>
						手机号：15282265487
						<uni-icons type="right" size="16"></uni-icons>
					</view>
					<view class="">
						<image src="/static/mine/3.png" mode="" class="sex_icon"></image>
					</view>
				</view>
				<view class="notice">
					<uni-icons type="notification" size="18"></uni-icons>
				</view>
			</view>
			<view class="detail_box">
				<view class="get_detail" @click="gotoGave">
					<view class="count">
						0
					</view>
					<view class="title">
						我收到的
					</view>
				</view>
				<view class="send_detail" @click="gotoReceived">
					<view class="count">
						0
					</view>
					<view class="title">
						我赠送的
					</view>
				</view>
			</view>
		</view>
		<view class="">
			<!-- 我的订单 -->
			<view class="section">
				<view class="section-header" @click="gotoOrder">
					<text class="section-title">我的订单</text>
					<text class="all-order">全部订单 >
					</text>
				</view>
				<view class="icon-row">
					<view class="icon-item" v-for="(item, index) in orderType" :key="index" @click="gotoOrder(item)">
						<image :src="item.icon" class="icon" />
						<text>{{ item.name }}</text>
					</view>
				</view>
			</view>

			<!-- 专属客服 -->
			<view class="section">
				<view class="section-header">
					<text class="section-title">专属客服</text>
				</view>
				<view class="icon-row two">
					<view class="icon-item">
						<image src="/static/mine/6.png" class="icon" />
						<text>在线客服</text>
					</view>
					<view class="icon-item">
						<image src="/static/mine/5.png" class="icon" />
						<text>用户协议</text>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderType: [{
						name: '待付款',
						icon: '/static/mine/7.png'
					},
					{
						name: '待配送',
						icon: '/static/mine/7.png'
					},
					{
						name: '待收货',
						icon: '/static/mine/4.png'
					},
					{
						name: '已完成',
						icon: '/static/mine/4.png'
					},
					{
						name: '退款 / 售后',
						icon: '/static/mine/5.png'
					},
					{
						name: '兑换',
						icon: '/static/mine/5.png'
					}
				]
			};
		},
		methods: {
			gotoGave() {
				uni.navigateTo({
					url: "/pagesA/gaveGift/gaveGift",
					complete(res) {
						console.log(res);
					}
				})
			},
			gotoReceived() {
				uni.navigateTo({
					url: "/pagesA/received/received",
					complete(res) {
						console.log(res);
					}
				})
			},
			gotoOrder(item) {
				console.log('gotoOrder', item);
				if (item.name == '兑换') {
					uni.navigateTo({
						url: "/pagesA/exchange/exchange",
						complete(res) {
							console.log(res);
						}
					})
				} else {
					uni.setStorage({
						key: "item",
						data: item.name ? item.name : '全部'
					})
					uni.navigateTo({
						url: "/pagesA/myOrder/myOrder?type=" + item.name,
						complete(res) {
							console.log(res);
						}
					})
				}

			},
			gotoEditUser() {
				uni.navigateTo({
					url: "/pagesA/userInfo/userInfo"
				})
			}
		}
	}
</script>

<style lang="scss">
	.top {
		width: 750rpx;
		height: 269rpx;
		background: #E0D9E7;
		display: flex;
		flex-direction: column;

		.logo {
			height: 48rpx;
			width: 200rpx;
			margin: 110rpx 0 22rpx 60rpx;
		}

		.tip {
			font-family: Source Han Sans SC;
			font-weight: 400;
			font-size: 22rpx;
			color: #333333;
			line-height: 36rpx;
			margin-left: 55rpx;
		}
	}

	.user_info {
		display: flex;
		flex-direction: column;
		margin-bottom: 40rpx;

		.user_info_top {
			margin-left: 50rpx;
			margin-top: -38rpx;
			display: flex;

			.user_img {
				margin-right: 24rpx;

				.profile_picture_img {
					width: 155rpx;
					height: 155rpx;
					border-radius: 50%;
				}
			}

			.user_detail {
				display: flex;
				flex-direction: column;
				margin-top: 60rpx;

				.user_name {
					font-family: Source Han Sans SC;
					font-weight: bold;
					font-size: 34rpx;
					color: #333333;
					line-height: 36rpx;
					margin-bottom: 16rpx;
				}

				.user_phone {
					font-family: Source Han Sans SC;
					font-weight: 400;
					font-size: 22rpx;
					color: #333333;
					line-height: 36rpx;
					margin-bottom: 16rpx;

					.sex_icon {
						background: #FFE8E8;
						margin-right: 10rpx;
					}
				}

				.sex_icon {
					width: 16rpx;
					height: 24rpx;
					background: #E8F2FF;
					border-radius: 50%;
				}
			}

			.notice {
				width: 63rpx;
				height: 63rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				text-align: center;
				line-height: 63rpx;
				margin-left: 150rpx;
				margin-top: 60rpx;
			}
		}

		.detail_box {
			display: flex;
			margin-top: 30rpx;

			>view {
				text-align: center;
			}

			.get_detail {
				margin-left: 188rpx;

				>view {
					display: flex;
					flex-direction: column;

					.count {
						margin-bottom: 20rpx;
						font-family: Source Han Sans SC;
						font-weight: bold;
						font-size: 24rpx;
						color: #333333;
						line-height: 36rpx;
					}

					.title {
						font-family: Source Han Sans SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #333333;
						line-height: 36rpx;
					}
				}


			}

			.send_detail {
				margin-left: 200rpx;
			}
		}
	}

	.section {
		background-color: #fff;
		border-radius: 16rpx;
		margin: 20rpx;
		padding: 20rpx;

		.section-header {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.section-title {
				font-size: 28rpx;
				font-weight: bold;
				color: #222;
				border-left: 6rpx solid #6f3edc;
				padding-left: 12rpx;
			}

			.all-order {
				font-size: 24rpx;
				color: #999;
			}
		}

		.icon-row {
			display: flex;
			// justify-content: space-around;
			margin-top: 50rpx;
			flex-wrap: wrap;
			width: 110%;

			.icon-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 30%;
				margin-bottom: 20rpx;
				text-align: center;

				.icon {
					width: 50rpx;
					height: 50rpx;
					margin-bottom: 10rpx;

				}

				text {
					font-size: 24rpx;
					color: #333;
				}
			}
		}
	}

	.two {
		justify-content: flex-start !important;

		.icon-item {
			margin-left: 54rpx;
			margin-right: 70rpx;
		}
	}
</style>